<script lang="ts">
import { TableColumn } from '@/types/common-table'
import { h } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
import Pagination from '../Pagination/index.vue'
export default {
  name: 'CommonTable',
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => []
    },
    // 表格表头
    columns: {
      type: Array,
      default: () => []
    },
    // 展示分页
    showPagination: {
      type: Boolean,
      default: true
    },
    // 总条目数
    total: {
      required: false,
      type: Number
    },
    // 当前页数：pageNo
    pageNumber: {
      type: Number,
      default: 1
    },
    // 每页显示条目个数：pageSize
    pageSize: {
      type: Number,
      default: 20
    },
    // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
    // 移动端页码按钮的数量端默认值 5
    pagerCount: {
      type: Number,
      default: document.body.clientWidth < 992 ? 5 : 7
    }
  },
  emits: ['update:pageSize', 'update:pageNumber', 'change-table-info'],
  setup(props, { emit, attrs, slots }) {
    return function () {
      // 过滤掉不显示的
      let columns = props.columns.filter((e: TableColumn) => {
        const res = e.show === undefined ? true : e.show
        return res
      })
      // 处理 render formatter slot
      columns = columns.map((column: TableColumn) => {
        if (column.render) {
          const func = column.render
          return h(ElTableColumn, { ...column }, function (...args) {
            const row = args[0].row
            return func(h, row, args[0])
          })
        }
        if (column.formatter && typeof column.formatter === 'function') {
          const func = column.formatter
          return h(ElTableColumn, { ...column }, function (...args) {
            const row = args[0].row
            return func(row)
          })
        }
        // 处理插槽
        if (column.slot) {
          // 如果插槽存在
          if (slots[column.slot]) {
            return h(ElTableColumn, { ...column }, function (...args) {
              const row = args[0].row
              return h(slots[column.slot as string] as unknown, { row })
            })
          }
        }
        return h(
          ElTableColumn,
          { ...column, 'show-overflow-tooltip': true },
          function (...args) {
            const row = args[0].row
            const key = column.key as string
            if (!key) {
              return null
            }
            return h('span', row[key])
          }
        )
      })
      const commonPagination = () => {
        if (props.showPagination) {
          return h(Pagination, {
            total: props.total || 0,
            page: props.pageNumber,
            limit: props.pageSize,
            pagerCount: props.pagerCount,
            onPagination: (val) => {
              emit('update:pageNumber', val.page)
              emit('update:pageSize', val.limit)
              emit('change-table-info', val)
            }
          })
        } else {
          return null
        }
      }

      return h('div', {}, [

        h(
          ElTable,
          {
            ...props,
            ...attrs,
            on: { ...attrs }
          },
          () => {
            const _columns = columns
            return _columns
          }
        ),
        commonPagination()
      ])
    }
  }
}
</script>
<style scoped lang="less"></style>
